<template>
  <div class="root banner-image" :style="{
    backgroundImage: 'url(' + backgroundImage + ')'
  }" style="height: 1600px" >
    <div>
      <h1 class="name">{{ productName }}</h1>
      <h2 class="h1 hero-title">
        <strong>{{ title }}</strong>
      </h2>

      <p class="hero-text">
        {{ description }}
      </p>

    </div>
  </div>
</template>

<script>
export default {
  name: "TheBannerOfBrand",
  props: {
    productName : {
      type: String,
      default: 'MacBook Air'
    },
    title: {
      type: String,
      default: "再一次，惊艳世界"
    },
    description: {
      type: String,
      default: "MacBook Air 别看轻，别轻看。 由 M2 强势驱动"
    },
    backgroundImage: {
      type: String,
      default: 'https://www.apple.com/v/home/aq/images/heroes/macbook-air/hero_macbookair__el7scava26mq_largetall_2x.png'
    },
    isProduct: {
      type: Boolean,
      default: true
    }
  },
  created() {
  },
  methods: {},
}
</script>

<style scoped>

.root{
  width: 100%;
  height: 500px;
  padding: 10rem;
}
.name {
  font-size: 13rem;
  font-weight: bold;
  background-image: linear-gradient(to right, #118fdc, #dd001b, #2b2bb4, #fff);
  color: transparent;
  -webkit-background-clip: text; 
}
.banner-image {
  background-size: cover;
}
</style>
